﻿var largePreview = 180;
var smallPreview = 50;
var viewWidth = largePreview;
var ratio = 1;
var usingAspectRatio = false;
var sizeType = "Large"
var api;
var itop = 10;
var iright = 100;
var ibottom = 100;
var ileft = 100;
$(function () {
    api = $.Jcrop('#imageEditor', {
        onChange: showPreview,
        onSelect: showPreview,
        setSelect: [ileft, itop, iright, ibottom],
        minSize: [50, 50]
    });
    $("#imagePreview").parent().css('width', 180).css('height', 180 * parseFloat($("input[name=ratio]").val()));
    ratio = parseFloat($("input[name=ratio]").val());

    //gan su kien xu ly
    $("input[type=radio][name=sizeType]").live('click', function () {
        sizeType = $(this).val();
        if (sizeType == "Large") {
            ratio = parseFloat($("input[name=ratio]").val());
            viewWidth = largePreview;
        }
        else {
            ratio = 1;
            viewWidth = smallPreview;
        }
        if (usingAspectRatio) {
            api.setOptions({ aspectRatio: 1 / ratio });
        } else {
            api.setOptions({ aspectRatio: NaN });
        }
        $("#imagePreview").parent().css('width', viewWidth).css('height', viewWidth * ratio);
    })

    $("input[name=usingAspectRatio]").click(function () {
        usingAspectRatio = !usingAspectRatio;
        if (usingAspectRatio) {
            api.setOptions({ aspectRatio: 1 / ratio });
        } else {
            api.setOptions({ aspectRatio: NaN });
        }
    })

    //Luu hinh voi Size type
    $("a[name=btnSave]").live('click', function () {
        var sizeType = $("input[name=sizeType]:checked").val();
        $.post("/Profile/SaveAvatarEditing",
                 { 'top': itop, 'right': iright, 'bottom': ibottom, 'left': ileft, 'sizeType': sizeType },
                 function (data) {
                     if (data == "success") {
                         alert("Thành công");
                         location.href = "/Profile/ChangeAvatar";
                     }
                     else {
                         alert("Có lỗi, refresh trình duyệt và thử lại sau ");
                     }
                 })
    })
});

function showPreview(coords) {
    if (parseInt(coords.w) > 0) {
        //        $('#Top').val(coords.y);
        //        $('#Left').val(coords.x);
        //        $('#Bottom').val(coords.y2);
        //        $('#Right').val(coords.x2);
        itop = coords.y;
        ileft = coords.x;
        ibottom = coords.y2;
        iright = coords.x2;

        var width = $("#imageEditor").attr("width");
        var height = $("#imageEditor").attr("height");
        var rx = viewWidth / coords.w;
        var ry = viewWidth * ratio / coords.h;

        jQuery('#imagePreview').css({
            width: Math.round(rx * width) + 'px',
            height: Math.round(ry * height) + 'px',
            marginLeft: '-' + Math.round(rx * coords.x) + 'px',
            marginTop: '-' + Math.round(ry * coords.y) + 'px'

        });
    }
}

